<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event List</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        .event-card {
            border: 1px solid #e9ecef;
            border-radius: 0.25rem;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .date-box {
            background-color: #f8f9fa;
            width: 100px;
            text-align: center;
            padding: 0.5rem;
            margin-right: 1rem;
            border-radius: 0.25rem;
        }

        .date-box .day {
            font-size: 12px;
            color: #343a40;
        }

        .date-box .month {
            font-weight: bold;
        }

        .date-box .weekend {
            background-color: #d4edda;
            font-size: 12px;
        }

        .ticket-info {
            background-color: #ffe6e6;
            padding: 0.5rem;
            border-radius: 0.25rem;
            margin-top: 0.5rem;
        }

        .btn-green {
            /* background-color: rgb(78, 124, 5); */
            border-color: rgb(78, 124, 5);
            color: rgb(78, 124, 5);
        }

        .btn-green:hover {
            background-color: rgb(78, 124, 5);
            color: white;
            /* border-color: #1e7e34; */
        }

        .btn-outline-green {
            color: rgb(78, 124, 5);
            border-color: rgb(78, 124, 5);
        }

        .btn-outline-green:hover {
            background-color: rgb(78, 124, 5);
            color: white;
        }

        .mr-2 {
            width: 20px;
            height: 13.75px;
        }
    </style>
</head>

<body>
    <div class="container" id="event-container">
        <div class="row mt-3">
            <div class="col-auto">
                <select class="custom-select">
                    <option selected>Singapore</option>
                    <option value="1">Another location</option>
                </select>
            </div>
            <div class="col-auto">
                <select class="custom-select">
                    <option selected>All dates</option>
                    <option value="1">Today</option>
                    <option value="2">Tomorrow</option>
                </select>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col">
                <p>No events near you</p>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col">
                <h5 id="event-count">2 events in all locations</h5>
            </div>
        </div>
        <!-- Event cards will be injected here -->
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="js/request.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            const events = [
                {
                    month: "JUL",
                    day: "12",
                    weekday: "SAT",
                    flag: "https://img.vggcdn.net/img/assets/Flags/country/cn.png?im=AspectCrop=(1,0.6875),xPosition=.5,yPosition=.5",
                    venue: "Shanghai Stadium, Shanghai, China",
                    time: "7:30 PM | Ye",
                    buttonType: "notify",
                    url: "details.html?id=21c79218-85ff-41a1-8a1f-72c073a986bb" // 添加的URL
                },
                {
                    month: "JUL",
                    day: "26",
                    weekday: "SAT",
                    flag: "https://img.vggcdn.net/img/assets/Flags/country/kr.png?im=AspectCrop=(1,0.6875),xPosition=.5,yPosition=.5",
                    venue: "Incheon Munhak Stadium, Incheon, South Korea",
                    time: "8:00 PM | Ye",
                    ticketInfo: "30 tickets remaining",
                    buttonType: "tickets",
                    url: "details.html?id=21c79218-85ff-41a1-8a1f-72c073a987bd" // 添加的URL
                }
            ];

            function createEventCard(event) {
                const dateBox = `
        <div class="col-auto">
            <div class="date-box weekend">
                <div class="month">${event.month}</div>
                <div class="day">${event.day}</div>
                <div class="weekend">${event.weekday}</div>
            </div>
        </div>
    `;

                const details = `
        <div class="col">
            <div class="row">
                <div class="col-auto">
                    <img src="${event.flag}" alt="Flag" class="mr-2">
                </div>
                <div class="col">
                    <strong>${event.venue}</strong><br>
                    ${event.time}
                    ${event.ticketInfo ? `<div class="ticket-info"><i class="fas fa-ticket-alt"></i> ${event.ticketInfo} <i class="fas fa-info-circle"></i></div>` : ""}
                </div>
            </div>
        </div>
    `;

                const button = event.buttonType === 'notify' ?
                    `<button type="button" class="btn btn-green"><i class="fas fa-bell"></i> Get Notified</button>` :
                    `<button type="button" class="btn btn-outline-green">See Tickets</button>`;

                // 包含了整个卡片的 a 标签
                const card = `
        <a href="${event.url}" target="_blank" style="text-decoration:none;color:inherit;">
            <div class="row mt-3">
                <div class="col">
                    <div class="event-card">
                        <div class="row">
                            ${dateBox}
                            ${details}
                            <div class="col-auto">
                                ${button}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    `;

                return card;
            }

            // Append each event to the container
            events.forEach(function (event) {
                $('#event-container').append(createEventCard(event));
            });
        });
    </script>
</body>

</html>